<script setup lang="ts">
  import { nextTick, ref } from 'vue'
  import _ from 'lodash'
  import { ElMessage } from 'element-plus'

  let selectData = []
  // 选择
  const handleSelectCode = (data) => {
    selectData = data
  }
  // 选择全部
  const handleSelectAllGood = (data) => {
    selectData = data
  }

  const drawer = ref(false)
  // 关闭
  const handleClose = () => {
    drawer.value = false
  }

  const list = ref([])
  const open = (params) => {
    list.value = params.list
    drawer.value = true
  }

  const emit = defineEmits(['confirm'])
  // 确认保存
  const onConfirm = () => {
    if (!selectData.length) {
      ElMessage.error('请勾选设备')
      return
    }
    emit('confirm', selectData)
    drawer.value = false
  }

  defineExpose({
    open,
  })
</script>

<template>
  <el-drawer
    v-model="drawer"
    size="1000px"
    title="选择设备"
    direction="rtl"
    :before-close="handleClose"
  >
    <div class="table">
      <el-table
        ref="tableInstance"
        :border="true"
        stripe
        resizable
        :data="list"
        @select="handleSelectCode"
        @select-all="handleSelectAllGood"
      >
        <el-table-column type="selection" width="50" fixed />
        <el-table-column type="index" width="50" fixed label="序号" :align="'center'" />
        <el-table-column show-overflow-tooltip prop="code" width="140" label="序列号（序列号）" />
        <!-- 设备编号 -->
        <el-table-column
          label="设备编号"
          width="140"
          prop="goodsSpecCode"
          show-overflow-tooltip
        ></el-table-column>

        <!-- 设备名称 -->
        <el-table-column
          label="设备名称"
          width="140"
          prop="goodsName"
          show-overflow-tooltip
        ></el-table-column>

        <!-- 规格 -->
        <el-table-column
          label="规格"
          width="140"
          prop="goodsSpecName"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column show-overflow-tooltip prop="parentName" label="父项" width="140" />

        <el-table-column prop="warrantyStartTime" label="质保开始" width="140" />
        <el-table-column prop="warrantyEndTime" label="质保截止" width="140" />
      </el-table>
      <div class="footer">
        <el-button type="primary" @click="onConfirm">确认</el-button>
        <el-button type="default" @click="handleClose">取消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<style scoed lang="scss">
  .customer-goods {
    height: 99%;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
  }
  .table {
    height: calc(100% - 40px);
    position: relative;
    padding-bottom: 100px;
    .footer {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
    }
  }
</style>
